<template>
  <div class="comment-list">
    <div>
      <textarea v-model="commentValue"/>
      <zhButton :width="100" title="Send" @click="onSendBtnClick"></zhButton>
    </div>
    <div class="comment-container" v-for="(comment, index) in Comments">
      <div class="comment">
        <a href="#">{{comment.username}}</a>
        <div>
          {{comment.comment}}
        </div>
        <div class="tool-bar"><span>#{{index + 1}}</span><span class="btn-hover">Reply</span></div>
      </div>
      <div class="reply-list">
        <div class="reply" v-for="reply in comment.replies">
          <div class="reply-content"><a href="#">{{reply.username}}</a>: reply.comment</div>
          <div class="info"><span>2019-01-11 07:02</span><i></i><span>895</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  textarea {
    resize: none;
    height: 10vh;
    width: 100%;
    margin-bottom: 10px;
  }

  a {
    font-size: 20px;
    color: #0050b3;
    text-decoration: none;
    font-weight: 700;
    line-height: 18px;
    word-wrap: break-word;
  }

  .btn-hover {
    padding: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
  }

  .btn-hover:hover {
    color: #00a1d6;
    background-color: #c3c3c3;
  }

  .comment-container {
    font-size: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgb(229, 233, 239);
  }

  .comment-list {
    text-align: left;
    margin-left: 10px;
    margin-right: 14px;
  }

  .comment {
    line-height: 26px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .comment > div {
    padding: 2px 0;
  }

  .tool-bar span {
    margin-right: 15px;
    font-size: 18px;
    line-height: 26px;
    color: #99a2aa;
  }

  .reply {
    line-height: 26px;
    padding: 10px 10px 10px 100px;
  }

  .reply .reply-content {
    padding-bottom: 4px;
  }

  .reply .info {
    font-size: 18px;
    color: #99a2aa;
  }

  .reply .info span {
    margin-right: 15px;
  }

  .reply .info i {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 5px;
    background: url(./img/icons-comment.png) no-repeat;
    background-position-x: -153px;
    background-position-y: -25px;
  }

  .reply .info i:hover {
    background-position-x: -153px;
    background-position-y: -89px;
  }

</style>

<script>
  let zhButton = resolve => {
    require(['../buttom'], resolve);
  }
  export default {
    components: {
      zhButton
    },
    props: {
      Comments: {
        type: Array,
        default: () => {
          return [
            {
              username: 'test',
              comment: 'testf fejiorajerjejfladf',
              replies: [
                {
                  username: 'test',
                  comment: 'testeroqiejrojqweio'
                },
                {
                  username: 'test',
                  comment: 'test'
                }
              ]
            },
            {
              username: 'test',
              comment: 'testf fejiorajerjejfladf',
              replies: [
                {
                  username: 'test',
                  comment: 'testeroqiejrojqweio'
                },
                {
                  username: 'test',
                  comment: 'test'
                }
              ]
            }
          ]
        }
      }
    },
    data(){
      return {
        commentValue: ''
      }
    },
    methods: {
      onSendBtnClick(){
        this.$emit('sendComment', this.commentValue);
      }
    }
  }
</script>
